<template>
  <n-config-provider :theme="darkTheme">
    <div class="window">
      <div class="title-bar">
        <div style="height:30px;width:300px;float:left">
          <img src="@/assets/images/home/logo.ico" style="width:30px;height:30px;float:left;margin-left:5px;" alt=""/>
          <div style="margin-top:2px;float:left;margin-left:10px;font-size: 14px;">PNG转ICO</div>
        </div>
        <n-button-group size="small" class="btn_right">
          <n-button type="primary" tertiary  round title="调试" @click="getDebug">
            <template #icon>
              <n-icon><ConstructSharp /></n-icon>
            </template>
          </n-button>
          <n-button type="info" tertiary  title="缩小" @click="minimize">
            —
          </n-button>
          <n-button type="info" tertiary  title="放大" @click="maximize">
            <template #icon>
              <n-icon><ResizeOutline /></n-icon>
            </template>
          </n-button>
          <n-button type="info" tertiary  title="关闭" @click="close">
            <template #icon>
              <n-icon><Power /></n-icon>
            </template>
          </n-button>
        </n-button-group>
      </div>
      <div class="content">
        <!-- 这里是你的应用内容 -->
        <router-view></router-view>
      </div>
    </div>
    <n-global-style />
  </n-config-provider>
</template>

<script lang="ts" setup>
import { RouterView } from 'vue-router'
import { darkTheme, NConfigProvider } from 'naive-ui'
import { ConstructSharp,Power,ResizeOutline } from '@vicons/ionicons5'
import { request } from '@/api'


const minimize = async () => {
  await getOperate(0);
}
const maximize = async () => {
  await getOperate(1);
}
const close = async () => {
  await getOperate(2);
}
const getDebug = async () => {
  await getOperate(3);
}

const getOperate = async (operate: number) => {
  console.log("getOperate=>", operate);
  const res = await request({
    url: "/api/operate",
    method: "get",
    data: {
      operate: operate
    }
  });
  console.log(res);
}
</script>

<style scoped>
.window {
  height: 100%;
  width: 100%;
}

.title-bar {
  height: 30px;
  width: 100%;
  background-color: #2e2e2e;

  line-height: 30px;
  -webkit-app-region: drag; /* 使标题栏可拖动 */
}
.btn_right{
  float:right;
  padding-top:1px;
  -webkit-app-region: no-drag;
}

.content {
  height: calc(100% - 30px);
  width: 100%;
}

</style>
<style>

</style>
